<template>
  <div>
      <el-card class="box-card">
          <!--  {{loginUser.reviewBeans.length }} -->
          <!-- {{reviewIds}}  -->
      <div slot="header" class="clearfix">
        <h1>评论</h1>
        </div>    
        <div v-for="review in reviews" :key="review.reviewId" class="text item">
            <el-row>
                <el-col :span="3"><div class="grid-content bg-purple">{{review.reviewer}}</div></el-col>
                <el-col :span="2"><div class="grid-content bg-purple-light">{{":"}}</div></el-col>
                <el-col :span="8"><div class="grid-content bg-purple">{{review.content}}</div></el-col>
                 <el-col :span="6"><div class="grid-content bg-purple" > 
                     <el-image
                        style="width: 50px; height: 50px"
                        :src="getImage(review.reviewId)" @click=clickImg(review)
                        ></el-image></div></el-col>
                 <el-col :span="4"><div class="grid-content bg-purple">{{"点赞数："+review.likeNum}}</div></el-col>
             </el-row>
             
              <el-divider></el-divider>
        </div>
    </el-card>
  </div>
</template>

<script>
export default {
    data(){
        return{
            reviews:{},
            url:"../assets/zan.png",
            loginUser:{},
            reviewIds:[]
        }
    },
    methods:{
        async findAllReview(){
            var info = await this.ajax.getSubmit("/project/reviews");
            this.reviews=info;

        },
        async getLoginUser(){
            var info = await this.ajax.getSubmit("/project/users/getUser");
                
                    this.loginUser=info.data;
                for(var i=0;i<info.data.reviewBeans.length;i++){
                    this.reviewIds[i]=info.data.reviewBeans[i].reviewId;
                }
               
        },
        getImage(review){
            if(this.reviewIds.indexOf(review) == -1){
                return require("../assets/zan.png");
            }else{
                return require("../assets/zan_active.png");                    
            }   
        },
        async clickImg(review){
            alert(this.reviewIds.indexOf(review.reviewId))
            if(this.reviewIds.indexOf(review.reviewId) == -1){
                this.reviewIds[this.reviewIds.length]=review.reviewId;
                this.loginUser.reviewBeans.push(review);
                var info = await this.ajax.postSubmit("/project/urs/add",{userId:this.loginUser.userId,reviewId:review.reviewId});
                
                this.findAllReview();
                // this.getLoginUser()
                
            }else{
                var info = await this.ajax.postSubmit("/project/urs/del",{userId:this.loginUser.userId,reviewId:review.reviewId});                 
                this.reviewIds[this.reviewIds.indexOf(review.reviewId)]=null;
                this.findAllReview();
                // this.getLoginUser();
               
            }   
        }
           
    },
    created(){
        this.findAllReview();
        this.getLoginUser();
    }
}
</script>

<style>

</style>